<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>PUMA中国官方商城</title>
	<link href="favicon.png"rel="shortcut icon">
	<link rel="stylesheet" type="text/css" href="css/nav.css">
	<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="iconfont2/iconfont.css">
	<style type="text/css" media="screen">
		*{
			padding:0;
			margin:0;
		}
		ul li{
			list-style:none;
		}
		#Box{
			width:1348px;
			margin:0 auto;
			overflow:hidden;
		}
		#down{
			height:1200px;
			width:1348px;
			margin:0 auto;
		}
		#content{
			height:940px;
			width:1173px;
			margin:88px auto;
		}
		#content h1{
			font-size:45px;
			border-bottom:2px solid black;
		}
		#content h2{
			font-size:25px;
		}
		#content span{
			height:560px;
			width:353px;
			border:1px solid #eaeaea;
			float:left;
			margin-right:6px;
			margin-top:20px;
			margin-bottom:80px;
			padding-left:30px;
			font-size:16px;
		}
		#dengBtn,#submit,#chuangjian{
			width:200px;
			height:40px;
			background-color:red;
			color:white;
		}
		#content span ul{
			width:324px;
			margin-top:20px;
			margin-bottom:20px;
			border-top:1px dashed #eaeaea;
			border-bottom:1px dashed #eaeaea;
		}
		#content span ul li{
			margin-top:30px;
			margin-bottom:40px;
		}
		#content span i{
			font-size:30px;
		}
		#content ul a{
			float:right;
		}
		#content #kuai{
			height:50px;
			width:183px;
			line-height:50px;
			text-align:center;
			background-color:white;
			margin:0 auto;
			position:relative;
			top:-25px;
		}
		#haoma,#mima{
			padding:5px;
			padding-right:150px;
			margin-top:10px;
			background-color:rgb(234,234,234);
			border:0;
		}
		#content .kuai{
			width:300px;
			float:left;
			text-align:center;
			margin-right:80px;
			margin-top:10px;
		}
		#content .kuai i{
			font-size:40px;
		}
		.kuai ul{
			float:left;
			margin-right:15px;
		}
		.kuai ul li{
			line-height:30px;
		}
		.kuai #xiaoxi{
			padding:5px;
	        padding-right:21px;
			background:url(../images/jingling.png)no-repeat;
	        background-position:-238px -110px;
		}
		#txt{
			background-color:rgb(234,234,234);
			border:0;
			padding:5px;
			padding-right:60px;
		}
		#yanzhengma{
			padding:3px;
		}
		</style>
</head>
<body>
	<div id="Box">
		<div class='top_box'>
			   <p> 
			   	<a href="#">订阅电子邮件&nbsp;&nbsp;&nbsp;&nbsp;|</a> 
				<a href="#">帮助中心&nbsp;&nbsp;&nbsp;&nbsp;|</a>
				<a href="#">登录&nbsp;&nbsp;&nbsp;&nbsp;|</a>
				<a href="#">注册&nbsp;&nbsp;&nbsp;&nbsp;|</a>
				<a href="#">中国&nbsp;<b>China</b>
					<a href="#"id="qiu"></a>
					<a href="#"id="xiajian"></a>
				</a> 
			   </p>
			</div>
		    <div id='nav'>
		    	<span id="nav_left">
		    		<ul>
		    			<li id="logo"></li>
		    			<li><a href="#">男子</a><div>下拉</div></li>
		    			<li><a href="#">女子</a><div>下拉</div></li>
		    			<li><a href="#">儿童</a><div>下拉</div></li>
		    			<li><a href="#">运动</a><div>下拉</div></li>
		    			<li><a href="#">SELECT</a></li>
		    			<li><a href="#">新品</a></li>
		    			<li><a href="#">季末清仓</a></li>
		    		</ul>
		    		<script type="text/javascript">
	    		    var nav_left = document.getElementById("nav_left");
					var lis = nav_left.getElementsByTagName("li");
					var div = nav_left.getElementsByTagName("div");
					for (var i = 1; i < lis.length; i++) {
						lis[i].index = i;
						lis[i].onmouseover = function(){
							for (var i = 1; i < div.length; i++) {
								div[i].style.display="none";
							};
							div[this.index].style.display="block";
						}
						lis[i].onmouseout = function(){
							for (var i = 1; i < div.length; i++) {
								div[i].style.display="none";
							}
						}
					}
	            </script>
		    	</span>
		    	<span id="nav_right">
		    	    <a href="#">在线客服</a>
		    	    <a href="#"id="kefu"></a>
		    		<input type="text"placeholder="我要查找....">
		    		<button id="search"><i class="iconfont icon-sousuo"></i></button><a href="#">购物车</a><a href="#"id="shop"></a>
		    	</span>
		    </div>
		    <div id='bot_nav'>
		    	<div id="demo">
				    <div id="demo1">
				        <div>欢迎来到PUMA中国官方商城 即日起至6月20日 任意消费享全店包邮。</div>
				        <div>受峰会影响，5月28日-6月14日发往山东青岛的快件将会延长1-3天。新疆及西藏地区默认仅发EMS，目前无法提供更改及转寄服务。敬请谅解。</div>
				        <div>因系统维护，5月28日起将不可使用银联支付，恢复时间待通知，给您带来不便敬请谅解。</div>
				        <div>因国家税务总局规定，从2018年5月1日起开具的增值税发票税率将调至16%，您可在订单付款时勾选发票（个人或企业），发货七天后在历史订单中下载。</div>
				    </div>
				    <div id="demo2"></div>
				</div>
		    </div>
	        <script type="text/javascript">
		        // 滚动字
		        var speed=50;
				var demo=document.getElementById("demo"); 
				var demo2=document.getElementById("demo2"); 
				var demo1=document.getElementById("demo1"); 
				demo2.innerHTML=demo1.innerHTML
				function Marquee(){
				    if((demo2.offsetTop - demo.offsetTop)-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight;
				    else demo.scrollTop++;
				} 
				var MyMar=setInterval(Marquee,speed) 
				demo.onmouseover=function() {clearInterval(MyMar)} 
				demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
		        //吸顶
				var nav = document.getElementById('nav');
				var nav_Top = nav.offsetTop;
				document.onscroll = function(){
					var bTop = document.documentElement.scrollTop;
					if(bTop > nav_Top){
						nav.className = 'fix';
					}else{
						nav.className = '';
					}
				}
			    </script>
			   </div>
			   <div id="content">
			    		<h1>账户登录</h1>
			    		<span>
			    			<h2>已有账户用户</h2>
			    			<ul>
			    				<li>如果您是已注册会员，请登录</li>
			    				<li>*手机号码
                                <br>
			    				<input type="text"placeholder="输入登录手机号"id="haoma"></li>
			    				<li>*密码
                                <br>
			    				<input type="text"placeholder="输入密码"id="mima"></li>
			    				<li><input type="checkbox">自动登录<a href="#"id="Mm">忘记密码</a></li>
			    				<li><input type="button"value= "登录"id="dengBtn"></li>
			    			</ul>
			    			<script type="text/javascript">
                               // 手机号码正则
						     // 11位 第一位1开头  第二位3,4,5,7,8 后面9位0-9任意数字
						     var reg = /^1[3,4,5,7,8]\d{9}$/;
						     var haoma = document.getElementById("haoma");
						     var dengBtn = document.getElementById("dengBtn");
						     dengBtn.onclick = function(){
						     	if(reg.test(haoma.value)){
						     	alert("输入成功");
						     }else{
						     	alert("输入有误");
						     }
						     }
			    			</script>
			    			<p>使用社交网络账号登录</p>
			    			<p>
			    				<i class="iconfont icon-weibo"></i>
			    				<i class="iconfont icon-weixin"></i>
			    				<i class="iconfont icon-zhifubaorenzheng"></i>
			    			</p>
			    		</span>
			    		<span>
			    			<h2>查看订单</h2>
			    			<ul>
			    				<li>即使你不是会员,也可查看您的订单.请输入订单号及手机号码.</li>
			    				<li>*订单号
                                <br>
			    				<input type="text"placeholder="输入登录手机号"id="haoma"></li>
			    				<li>*手机号码
                                <br>
			    				<input type="text"placeholder="输入密码"id="mima"></li>
			    				<li>*验证码
                                 <br>
                                 <form action="1.php" method="get">
									<input type="text" placeholder="请输入右边的验证码"id="txt">
									<input type="button" id="yanzhengma">
								</form>
			    				</li>
			    				<li><input type="button"value= "查看订单详情"id="submit"></li>
			    				<script type="text/javascript">
									//一.获取元素
									var txt = document.getElementById("txt");
									var code = document.getElementById("yanzhengma");
									var submit = document.getElementById("submit");

									//二。随机验证码
									suijiyanzhengma();
									code.onclick = suijiyanzhengma;

									//三验证是否一致
									submit.onclick = function(){
										var useDaxie = txt.value.toUpperCase();
										var codeDaxie = code.value.toUpperCase();
										if(useDaxie==codeDaxie){
											alert("一致");
										}else if(txt.value.length==0){
											alert("不能为空");
										}else{
											alert("false");
										}
									}

									//二.生成验证码的方法
									function suijiyanzhengma(){
										function suijishu(max,min){
										//返回随机数
										return parseInt(Math.random()*(max-min)+min);
										}
										var benzi = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
										code.value = "";
										for(var i=0;i<6;i++){
										var xiabiao = suijishu(0,benzi.length-1);
										code.value+=benzi[xiabiao];
										}
									}
								</script>
			    			</ul>
			    		</span>
			    		<span>
			    			<h2>创建您的账户</h2>
			    			<ul>
			    				<li>创建一个新账号很简单，只需要填写以下表格，就可以享受拥有账号的好处。</li>
			    				<li><input type="button"value="创建您的账号"id="chuangjian"></li>
			    			</ul>
			    		</span>
			    		<hr>
			    		<p id="kuai">PUMA祝您安全购买</p>
			    		<a class="kuai"> 
			    		    支持付款方式
			    		    <br><br><br>
			    			<i class="iconfont icon-alipay"></i>
			    			<i class="iconfont icon-weixinzhifu"></i>
			    			<i class="iconfont icon-yinlian"></i>
			    		</a>
			    		<a class="kuai">
			    		   物流保障
			    		   <br><br><br>
			    		   <i class="iconfont icon-shunfengsuyun"></i>
			    		   <i class="iconfont icon-LOGO_EMS"></i>
			    		</a>
			    		<a class="kuai">
			    		   客户服务
			    		   <br><br><br>
			    		   <ul>
			    		   	 <!-- <li id="xiaoxi"></li> -->
			    		   	 <li>400-821-5065</li>
			    		   	 <li>周一至周日9:00-18:00</li>
			    		   </ul>
			    		    <ul>
			    		   	 <!-- <li id="xiaoxi"></li> -->
			    		   	 <li>联系在线客服</li>
			    		   	 <li>周一至周日9:00-22:00</li>
			    		   </ul>
			    		</a>
			    	</div>
			    	<div id="down">
		         		<iframe src="dibu.html"frameborder="0"width="1348px"height="1260px"scrolling="no"></iframe>
		         	</div>
		         	<div id="gotop" class="top">
		               <img src="images/Top.jpg">
		            </div>
		            <script src="js/my.js" type="text/javascript"></script>
	 			    <script>
				        window.onload = function() {
				            var goTop = $("gotop");
				            window.onscroll = function() {
				                scroll().top > 0 ? show(goTop) : hide(goTop);
				                leader = scroll().top;
				                console.log(scroll().top);
				            }
				            var leader = 0,target = 0,timer = null;
				            goTop.onclick = function() {
				                target = 0;
				                timer = setInterval(function() {
				                    leader = leader + (target - leader ) / 10;
				                    window.scrollTo(0,leader);
				                    if(leader == target)
				                    {
				                        clearInterval(timer);
				                    }
				                },20);

				            }
				        }
			        </script>
	</div>
</body>
</html>